import tagsViewPinia from '@pinia/modules/tagsView';
import { TagView } from '@pinia/types/tagsView';
import { reactive, computed, onMounted, onBeforeUnmount, ref, getCurrentInstance, ComponentInternalInstance } from 'vue';

export default function importConfig({ emit }) {
  const base = reactive<any>({
    tagAndTagSpacing: 4,
    scrollContainer: null,
  });
  const scrollContainer = ref(null);
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const scrollWrapper = computed(() => proxy?.$refs.scrollContainer.$refs.wrap);

  onMounted(() => {
    scrollWrapper.value?.addEventListener('scroll', emitScroll, true);
  });

  onBeforeUnmount(() => {
    scrollWrapper.value?.removeEventListener('scroll', emitScroll);
  });

  //滚轮事件
  const handleScroll = (e: WheelEvent) => {
    const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
    const $scrollWrapper = scrollWrapper.value;
    $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
    // console.log('发生滚动事件',$scrollWrapper,'-------',$scrollWrapper.scrollLeft);
  };

  const emitScroll = () => {
    emit('scroll');
  };

  const tagsViewStore = tagsViewPinia();
  const visitedViews = computed(() => tagsViewStore.visitedViews);

  //滚动至当前点击标签
  const moveToTarget = (currentTag: TagView) => {
    const $container = proxy?.$refs.scrollContainer.$el;
    // const $container = proxy?.$refs.scrollContainer;
    const $containerWidth = $container.offsetWidth;
    const $scrollWrapper = scrollWrapper.value;

    // console.log('测试数据',$containerWidth,'---',$container,'-----',$scrollWrapper);

    let firstTag = null;
    let lastTag = null;

    // find first tag and last tag
    if (visitedViews.value.length > 0) {
      firstTag = visitedViews.value[0];
      lastTag = visitedViews.value[visitedViews.value.length - 1];
    }

    if (firstTag === currentTag) {
      $scrollWrapper.scrollLeft = 0;
    } else if (lastTag === currentTag) {
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
    } else {
      const tagListDom: any = document.getElementsByClassName('tags-view-item');
      const currentIndex = visitedViews.value.findIndex((item) => item === currentTag);
      let prevTag = null;
      let nextTag = null;

      for (const k in tagListDom) {
        if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
          if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
            prevTag = tagListDom[k];
          }
          if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
            nextTag = tagListDom[k];
          }
        }
      }

      // the tag's offsetLeft after of nextTag
      const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + base.tagAndTagSpacing;

      // the tag's offsetLeft before of prevTag
      const beforePrevTagOffsetLeft = prevTag.offsetLeft - base.tagAndTagSpacing;
      if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
        $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
      } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
        $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
      }
    }
  };

  return {
    base,
    scrollContainer,
    tagsViewStore,
    visitedViews,
    scrollWrapper,
    handleScroll,
    emitScroll,
    moveToTarget,
  };
}
